var imgs = document.querySelectorAll('.small img')
var mask = document.querySelector('.mask')
var big = document.querySelector('.big')
var mimg = document.querySelector('.main img')
// 排他
for (i = 0; i < imgs.length; i++) {
    imgs[i].onclick = function () {
        //干掉所有人
        for (i = 0; i < imgs.length; i++) {
            imgs[i].style.border = ''
        }
        //留下我自己
        this.style.border = '2px solid red'
        mimg.src = this.src
    }
}
main.onmouseenter = function () {
    mask.style.display = 'block'
    big.style.display = 'block'
}
main.onmouseleave = function () {
    mask.style.display = ''
    big.style.display = ''
}
mimg.onmousemove = function (e) {
    mask.style.display = 'block'
    var a = e.pageX - 100
    var b = e.pageY - 100
    //最小值
    a = a < 0 ? 0 : a
    b = b < 0 ? 0 : b
    //最大值
    a = a > 200 ? 200 : a
    b = b > 200 ? 200 : b
    mask.style.top = b + 'px'
    mask.style.left = a + 'px'
    big.style.backgroundImage = `url(${this.src})`
    big.style.backgroundPosition = `${-2 * a}px ${-2 * b}px`
}
